<template>
  <view class="check-list">
    <u-section
      title="老师变动审核"
      :right="false"
      :style="{ margin: '30rpx' }"
      color="#07C38F"
      sub-color="#07C38F"
    ></u-section>

    <view v-if="checkList.length > 0">
      <view v-for="(item, index) in checkList" :key="index" class="list">
        <view>{{ item.name }}申请注册为{{ item.class_name }}的负责老师</view>
        <view>
          <u-button
            type="success"
            shape="circle"
            :custom-style="customStyle1"
            @click="agree(item, 1)"
            >同意</u-button
          >
          <view style="width: 40rpx"> </view>
          <u-button
            type="error"
            shape="circle"
            :custom-style="customStyle1"
            @click="agree(item, 0)"
            >拒绝</u-button
          >
        </view>
        <view> {{ formateDate(item.created_at) }}</view>
      </view>
    </view>
    <view v-else class="no-data"> 暂无待审核数据</view>

    <u-section
      title="审核历史"
      :right="false"
      :style="{ margin: '30rpx' }"
      color="#07C38F"
      sub-color="#07C38F"
    ></u-section>

    <view v-if="historyList.length > 0">
      <view v-for="(item, index) in historyList" :key="index" class="list">
        <view>{{ item.name }}申请注册为{{ item.class_name }}的负责老师</view>
        <u-button
          type="info"
          shape="circle"
          :custom-style="customStyle"
          :disabled="true"
          >已同意</u-button
        >
        <view> {{ formateDate(item.updated_at) }}</view>
      </view>
    </view>
    <view v-else class="no-data"> 暂无已审核数据</view>
  </view>
</template>

<script>
import { format } from "@/common/utils";
export default {
  data() {
    return {
      checkList: [],
      historyList: [],
      customStyle: {
        width: "150rpx",
        color: "#666666",
        height: "50rpx",
      },
      customStyle1: {
        width: "150rpx",
        color: "#ffffff",
        height: "50rpx",
        boxShadow: "6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2)",
      },
    };
  },
  methods: {
    /**
     * 时间转化
     */
    formateDate(time) {
      return format(time * 1000);
    },
    /**
     * 同意
     */
    agree(item, value) {
      console.log(item);
      var form = {
        id: item.user_id,
        is_agree: value,
        history_id: item.id,
      };
      this.$u.api.reFreshCheckApi(form).then((res) => {
        this.getCheckList();
        uni.showToast({
          title: "操作成功",
          duration: 2000,
        });
      });
    },
    /**
     * 获取审核list
     */
    getCheckList() {
      var form = {
        school_id: this.vuex_principal.school_id,
        id: this.vuex_principal.id,
      };
      this.$u.api.getTeacherCheckListApi(form).then((res) => {
        this.checkList = res.data.check_list;
        this.historyList = res.data.history_list.reverse();

        var form = {
          checkList: this.checkList,
          historyList: this.historyList,
        };
        //村缓存
        this.$u.vuex("vuex_checkList", form);
      });
    },
  },
  //请求数据
  created() {
    console.log(this.vuex_checkList);
    this.historyList = this.vuex_checkList.historyList;
    this.checkList = this.vuex_checkList.checkList;
  },
};
</script>

<style scoped lang ='scss' >
.check-list {
  background-color: #f7f7f7;
  min-height: 93vh;
  padding: 20rpx;
  .list {
    text-align: center;
    margin: 30rpx 0;
    color: #666666;
    & > view:nth-child(1) {
      margin-bottom: 10rpx;
    }
    & > view:nth-child(2) {
      margin-top: 10rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  .no-data {
    width: 50vw;
    margin: 0 auto;
    text-align: center;
    color: #666666;
  }
}
</style>
